<template>
    <div>
        <div class="resource-manage">
            <div class="card-box">
                <div class="card-title">楼栋信息</div>
                <el-form class="form-wrap" size="small" label-position="top">
                    <el-form-item label="楼栋名称" >
                        <el-col class="in_txt">{{propForm.building.buildingName}}</el-col>
                    </el-form-item>
                <!--    <el-form-item label="不动产单元号">
                        <el-col class="in_txt">{{propForm.building.unitNum}}</el-col>
                    </el-form-item>-->
                    <el-form-item label="所属项目">
                        <el-col class="in_txt">{{propForm.projectName}}</el-col>
                    </el-form-item>
                    <!--<el-form-item label="配套设施物业名称" prop="facilitiesName" v-if="current === '20'">
                        <el-col class="in_txt">{{propForm.facilitiesName}}</el-col>
                    </el-form-item>-->
                   <!-- <el-form-item label="项目竣工时间">
                        <el-col class="in_txt">{{propForm.building.completeTime}}</el-col>
                    </el-form-item>
                    <el-form-item label="房屋性质">
                        <el-col class="in_txt">{{propForm.building.roomType}}</el-col>
                    </el-form-item>
                    <el-form-item label="建构价款(元)">
                        <el-col class="in_txt">{{propForm.building.buildPrice}}</el-col>
                    </el-form-item>-->
                    <el-form-item label="建筑面积(m²)">
                        <el-col class="in_txt">{{propForm.building.floorArea}}</el-col>
                    </el-form-item>
                    <el-form-item label="地上建筑面积(m²)">
                        <el-col class="in_txt">{{propForm.building.groundArea}}</el-col>
                    </el-form-item>
                    <el-form-item label="地下建筑面积(m²)" >
                        <el-col class="in_txt">{{propForm.building.undergroundArea}}</el-col>
                    </el-form-item>
                    <el-form-item label="总套数(套)">
                        <el-col class="in_txt">{{propForm.building.totalSets}}</el-col>
                    </el-form-item>
                    <el-form-item label="是否独栋">
                        <el-col class="in_txt" v-if="propForm.building.isDetachedHouse == 0">否</el-col>
                        <el-col class="in_txt" v-if="propForm.building.isDetachedHouse == 1">是</el-col>
                    </el-form-item>
                    <el-form-item v-show="propForm.building.isDetachedHouse == 0" label="单元/楼座" >
                        <el-col class="in_txt" v-if="propForm.building.unitBuilding == 0">无</el-col>
                        <el-col class="in_txt" v-if="propForm.building.unitBuilding == 1">有 {{propForm.building.unitSize}} 单元/座</el-col>
                    </el-form-item>
                    <!--<el-form-item label="街道" >
                        <el-col class="in_txt">{{street_ch}}</el-col>
                    </el-form-item>
                    <el-form-item label="社区" >
                        <el-col class="in_txt">{{communityName_ch}}</el-col>
                    </el-form-item>
                    <el-form-item label="管理权属">
                        <el-col class="in_txt">{{manageUnit_ch}}</el-col>
                    </el-form-item>-->
                    <el-form-item label="物业地址" prop="investmentIntensity" class="full">
                        <el-col class="in_txt">{{getCardTypeValue(propForm.building.cityCode,cityAssembly)}}{{getCardTypeValue(propForm.building.countyCode,districtCollection)}}{{getCardTypeValue(propForm.building.buildStreet,streets)}}{{getCardTypeValue(propForm.building.communityName,communityNames)}}{{propForm.building.address}}</el-col>
                        <!--<el-row :gutter="10">
                            <el-col :span="4" class="in_txt">{{getCardTypeValue(propForm.building.cityCode,cityAssembly)}}</el-col>
                            <el-col :span="5" class="in_txt">{{getCardTypeValue(propForm.building.countyCode,districtCollection)}}</el-col>
                            <el-col :span="5" class="in_txt">{{getCardTypeValue(propForm.building.buildStreet,streets)}}</el-col>
                            <el-col :span="5" class="in_txt">{{getCardTypeValue(propForm.building.communityName,communityNames)}}</el-col>
                            <el-col :span="5" class="in_txt">{{propForm.building.address}}</el-col>
                        </el-row>-->
                    </el-form-item>
                    <el-form-item label="地图坐标">
                        <el-col class="in_txt">{{propForm.building.geographicCoordinates}}</el-col>
                    </el-form-item>
									<el-form-item label="数据渠道" >
										<span class="in_txt">{{getCardTypeValue(propForm.building.channel,propertyChannels)}}</span>
									</el-form-item>
                    <!--<el-form-item label="地址" class="full">
                        <el-col class="in_txt">{{propForm.building.areaName}} {{propForm.building.address}}</el-col>
                    </el-form-item>-->
                    <el-form-item label="备注" class="full">
                        <el-col class="in_txt">{{propForm.building.remarks}} {{propForm.building.address}}</el-col>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <div class="resource-manage">
            <div class="card-box">
                <div class="card-title">楼层信息</div>
                <el-form class="form-wrap" size="small">
                    <el-form-item label="地上层数(层)" >
                        <el-col class="in_txt">{{propForm.building.groundFloors}} 层</el-col>
                    </el-form-item>
                    <el-form-item label="地下层数(层)" >
                        <el-col class="in_txt">{{propForm.building.undergroundFloors}} 层</el-col>
                    </el-form-item>
                    <el-form-item label="总层数(层)" >
                        <el-col class="in_txt">{{propForm.building.totalFloors}}</el-col>
                    </el-form-item>
                </el-form>
            </div>
            <el-tabs tab-position="left" class="floorsStyle" @tab-click="handleClick">
                 <el-tab-pane  v-for="(item,index) in propForm.floors" :key="index">
                      <span slot="label">
                          <div class="item-title">{{item.actualFloor}}</div>
                      </span>
                      <el-row class="item" >
                          <el-form
                              ref="floors"
                              class="form-wrap"
                              size="small"
                            >
                              <el-form-item label="层号" >
                                  <el-col class="in_txt">{{propForm.floors[index].floorNum}}</el-col>
                              </el-form-item>
                              <el-form-item label="实际层">
                                  <el-col class="in_txt">{{propForm.floors[index].actualFloor}}</el-col>
                              </el-form-item>
                              <el-form-item label="名义层" >
                                  <el-col class="in_txt">{{propForm.floors[index].nominalFloor}}</el-col>
                              </el-form-item>
                              <el-form-item label="层建筑面积(m²)">
                                  <el-col class="in_txt">{{propForm.floors[index].buildingArea}}</el-col>
                              </el-form-item>
                            <!--  <el-form-item label="层套内面积(m²)">
                                  <el-col class="in_txt">{{propForm.floors[index].insideArea}}</el-col>
                              </el-form-item>
                              <el-form-item label="层套内建筑面积(m²)">
                                  <el-col class="in_txt">{{propForm.floors[index].insideBuildingArea}}</el-col>
                              </el-form-item>
                              <el-form-item label="层分摊建筑面积(m²)">
                                  <el-col class="in_txt">{{propForm.floors[index].contributionArea}}</el-col>
                              </el-form-item>-->
                              <el-form-item label="层高(m)">
                                  <el-col class="in_txt">{{propForm.floors[index].floorHeight}}</el-col>
                              </el-form-item>
                              <div class="full">
                                  <div class="text-tips mb12">上传文件列表:</div>
                                  <div class="flex-c" v-for="(item, index) in loadFileList" :key="index">
                                      <template>
                                          <div v-if="item.type.split('/')[0] === 'image'" style="border: 1px solid #c0c4cc; margin: 5px 5px 0 0;border-radius: 4px;width: 50px; height: 50px">
                                              <el-image style="width: 50px; height: 50px"
                                                        :src="'/admin/sys-file/img/' + item.fileId"
                                                        :preview-src-list="['/admin/sys-file/img/' + item.fileId]">
                                              </el-image>
                                          </div>
                                          <div class="name mr20">{{ item.original + '(' + (item.fileSize / 1024 / 1024).toFixed(4) + 'M)'}}</div>
                                          <div class="date mr20">{{ item.updateTime }}</div>
                                          <div class="btn" >
                                              <el-button type="text" @click="handleDownload(item)">下载</el-button>
<!--                                              <el-button type="text" @click="handleRemove(item)">删除</el-button>-->
                                          </div>
                                      </template>
                                  </div>
                              </div>
                          </el-form>
                      </el-row>
                 </el-tab-pane>
            </el-tabs>
        </div>
        <div class="resource-manage">
            <div class="card-box">
                <div class="card-title">土地信息</div>
                <el-form
                    ref="landInfo"
                    class="form-wrap"
                    label-position="top"
                    size="small"
                    :model="landInfo">
                    <el-form-item label="宗地号">
                        <span class="in_txt">{{landInfo.parcelNum}}</span>
                    </el-form-item>
                    <el-form-item label="宗地面积(m²)">
                        <span class="in_txt">{{landInfo.parcelArea}}</span>
                    </el-form-item>
                    <el-form-item label="土地用途">
                        <span class="in_txt">{{getCardTypeValue(landInfo.landUse,landUses)}}</span>
                    </el-form-item>
                    <!--<el-form-item label="土地合同号">
                        <span class="in_txt">{{landInfo.landContractNum}}</span>
                    </el-form-item>-->
                    <el-form-item label="地址" class="full">
                        <span class="in_txt">{{landInfo.address}}{{landInfo.addressInfo}}</span>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="resource-manage" v-if="!isWebView">
            <div class="card-box">
                <!--<el-form size="small" class="but_form">
                    <el-form-item >
                        <el-button type="primary" @click="closeTab">关闭</el-button>
                    </el-form-item>
                </el-form>-->
                <el-button type="primary" @click="closeTab" class="btn-pro">关闭</el-button>
            </div>
        </div>
    </div>
</template>>

<script src="./building_look.js">

</script>

<style lang="scss" scoped>

    @include formWrap(4);
    .in_txt {
        color: #999999;
    }

    .resource-manage {
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 16px;
        padding: 16px 24px;
        .card-box {
            overflow: hidden;
            .btn-pro {
                float: right;
                margin: 20px;
            }
        }
    }
    .floorsStyle {
        box-sizing: border-box;
        background-color: #fff;
        .item-title {
            width: 50px;
            height: 40px;
            border: 1px solid rgba(0,0,0,.05);
            text-align: center;
        }
        .el-tabs__item.is-active {
            background-color: #d6f5ff;
            color: #1563d1;
            font-size: 20px;
        }
        .el-tabs__nav-scroll {
            height: 400px;
        }
        .el-icon-arrow-left:before {
            font-size: 24px;
            font-weight: 700;
        }
        .el-icon-arrow-right:before {
            font-size: 24px;
            font-weight: 700;
        }
        .item {
            padding: 10px;
            .item-purple {
                border: 1px solid rgba(0,0,0,.05);
                padding: 8px;
                text-align: center;
                color: #fff;
                font-weight: 600;
                cursor: pointer;
            }
            @include formWrap(3);
        }
    }
</style>
